<template>

    <div :class="{
            'loading-process--fullscreen':mode == 'fullscreen',
            'loading-process--absolute':mode == 'absolute',
            'loading-process':mode == 'normal',
        }"
        transition="fade">
        <div class="loading-process__box" :class='{ finish:finish }'>
            <div class="loading-process__content">
                <div class="loading-process__percent">
                    {{ persent }}%
                    <h1 class="loading-process__title">{{ title }}</h1>
                </div>
                <svg class="loading-process__circle" :width="size" :height="size">
                    <circle
                        :cx="size/2"
                        :cy="size/2"
                        :r="size/2 - 2*strokeWidth"
                        :stroke-width="strokeWidth-1"
                        :stroke="strokeColorDefault"
                        :fill="fill">
                    </circle>

                    <circle
                        :cx="size/2"
                        :cy="size/2"
                        :r="size/2 - 2*strokeWidth"
                        :stroke-width="strokeWidth"
                        :stroke="strokeColorProcess"
                        :stroke-dasharray='dasharray'
                        :fill="fill">
                    </circle>
                </svg>
            </div>
            <div class="loading-process__backface">
                <i v-if='status == "success"' class='daze-icon daze-selectmark'></i>
                <i v-if='status == "fail"' class='daze-icon daze-fail'></i>
            </div>
        </div>
    </div>

</template>

<script>
    import { getQueryString, convertParams, convertRequestURL, localInfo } from '../utils/utils'
    import client from '../utils/client'
    import loading from '../components/Loading.vue'

    export default {
        props:{
            title:{
                type: String,
                default:''
            },
            mode: {
                type: String,
                default:'normal'
            },
            strokeWidth:{
                type: Number,
                default: 5
            },
            strokeColorDefault:{
                type: String,
                default: '#7d4a31'
            },
            strokeColorProcess:{
                type: String,
                default: '#7d4a31'
            },
            fill:{
                type: String,
                default: '#fcee21'
            },
            size:{
                type: Number,
                default: 140
            },
            loaded:{
                type: Boolean,
                required: true,
                default: false,
            },
            status:{
                type: String,
                default: 'success',
            }
        },
        created(){
            this.simulateProcess()
        },
        data() {
            return {
                persent:0,
                finish:false,
                circumference:(this.size/2 - 2*this.strokeWidth)*2*Math.PI
            }
        },
        computed:{
            dashPersent(){
                return this.persent/100 * this.circumference
            },
            dasharray(){
                return `${this.dashPersent} ${this.circumference}`
            }
        },
        methods:{
            simulateProcess(){
                if(this.persent < 25){
                    let randomTime = 200*Math.random()
                    this.setPersent(randomTime)
                    return
                }
                else if(this.persent < 65){
                    let randomTime = 600*Math.random()
                    this.setPersent(randomTime)
                    return
                }
                else if(this.persent < 85){
                    let randomTime = 2000*Math.random()
                    this.setPersent(randomTime)
                    return
                }
                else if(this.persent < 99){
                    let randomTime = 5000
                    this.setPersent(randomTime)
                    return
                }
            },
            setPersent(time){
                setTimeout(()=>{
                    if(this.loaded){
                        this.persent = 100
                        this.finish = true
                        return
                    }
                    this.persent++
                    this.simulateProcess()
                },time)
            }
        },
        components:{ loading }
    }
</script>

<style lang='scss'>
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";

    .loading-process--fullscreen{
        position:absolute;
        z-index:$zIndex_loading;
        top:0;
        left:0;
        bottom:0;
        width:100%;
        height:auto;
        transform:translate3d(0,0,0);
        color:$importColor;
        text-align:center;
        .loading-process__box{
            position: absolute;
            top:50%;
            left:50%;
            margin:-70px 0 0 -70px;
        }
    }
    .loading-process{
        color:$importColor;
        position: relative;
        text-align:center;
        background-color: $backgroundColor;
        padding-top:40px;
    }
    .loading-process__box{
        height:140px;
        width:140px;
        position: relative;
        -webkit-transform-style: preserve-3d;
        -webkit-perspective: 400px;
        transition:transform ease .3s;
        &.finish{
            .loading-process__content{
                opacity:0;
                transform:scale(1.3) rotateY(-180deg);
            }
            .loading-process__backface{
                opacity:1;
                transform:scale(1.3) rotateY(0deg);
            }
        }
    }
    .loading-process__title{
        font-size:14px;
        padding-top:6px;
        color:$importColor;
        font-weight:300;
    }
    .loading-process__content{
        position: absolute;
        width:140px;
        height:140px;
        border-radius:50%;
        box-sizing:border-box;
        top:50%;
        left:50%;
        margin:-70px 0 0 -70px;
        transition:all ease .3s .3s;
    }
    .loading-process__percent{
        -webkit-backface-visibility: hidden;
        width:100%;
        position: absolute;
        top:50%;
        transform:translate(0,-50%);
        color:$brown;
        font-weight:300;
        font-size:24px;
    }
    .loading-process__circle{
        transform:rotate(-90deg);
        transform-origin: center;
        circle{
            transition: stroke-dasharray .25s;
        }
    }
    .loading-process__backface{
        transition:all ease .3s .3s;
        opacity:1;
        -webkit-backface-visibility: hidden;
        transform: rotateY(180deg);
        background-color: #fcee21;
        width:120px;
        height:120px;
        border-radius:50%;
        box-sizing:border-box;
        border:2px solid $brown;
        position: absolute;
        top:50%;
        left:50%;
        margin:-60px 0 0 -60px;
        .daze-icon{
            font-size: 120px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -60px 0 0 -60px;
            width: 120px;
            height: 120px;
            color:$brown;
        }
    }

</style>


